<template>
  <div class="works" @scroll="loadMore">
    <div class="works-content" v-for="item in works" :key="item.id">
      <div class="works-author">
        <img :src="`https://ss.lanqb.com/${item.profile.avatar}`" alt="" />
        <h4>{{ item.profile.nickname }}</h4>
      </div>

      <div class="works-title">
        <p>{{ item.content }}</p>
        <img :src="`https://ss.lanqb.com/${item.works.url}`" alt="" />
      </div>

      <ul>
        <li>{{ item.tags[0] }}</li>
      </ul>

      <div class="works-actions">
        <span>♥ 5</span>
        <span>♥ 0</span>
        <span>♥ 0</span>
      </div>
    </div>
    <div v-show="isShow" style="margin-top: 20px; text-align: center">
      加载中...
    </div>
  </div>
</template>

<script>
export default {
  name: "CommunityWorks",

  data() {
    return {
      works: [],
      isShow: true,
      curPage: 1,
    };
  },

  methods: {
    loadMore(e) {
      // console.log("1111", e.target.scrollTop);
      if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight) {
        this.curPage++;
        this.isShow = true;
        fetch(`https://m.lanqb.com/api/works?type=1,4&page=${this.curPage}`)
          .then((res) => res.json())
          .then((data) => {
            this.works = [...this.works, ...data.data];
            this.isShow = false;
          });
      }
    },
  },

  created() {
    fetch("https://m.lanqb.com/api/works?type=1,4&page=1")
      .then((res) => res.json())
      .then((data) => {
        this.works = data.data;
        console.log(this.works);
      });
  },
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.works {
  height: calc(100vh - 48px - 44px - 108px);
  overflow-y: scroll;

  .works-content {
    width: 90%;
    padding: 20px;
    border-bottom: 3px solid #eee;
    .works-author {
      display: flex;
      align-items: center;
      img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
      }
      h4 {
        color: #3f4345;
        margin-left: 10px;
      }
    }

    .works-title {
      p {
        margin: 10px 0;
        color: #3f4345;
        font-size: 18px;
      }
      img {
        width: 200px;
        height: auto;
        border-radius: 10px;
      }
    }

    ul {
      margin: 10px 0;

      li {
        background-color: #f7f7f7;
        display: inline;
        font-size: 14px;
        color: #5b6164;
        border-radius: 10px;
        margin-left: 10px;
        padding: 10px;
      }
    }
    .works-actions {
      height: 22px;
      margin-top: 10px;
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>
